<template>
  <div>
    <el-card>
      <el-page-header title="新闻管理" @back="handleBack()">
        <template #content>
          <span class="text-large font-600 mr-3" style="font-size: 16px">
            编辑新闻
          </span>
        </template>
      </el-page-header>

      <el-form
        ref="newsFormRef"
        style="max-width: 600px"
        :model="newsForm"
        :rules="newsFormRules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="newsForm.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div style="border: 1px solid #ccc">
            <Editor
              @event="handlechange"
              :content="newsForm.content"
              v-if="showEditor"
            />
          </div>
        </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-select
            v-model="newsForm.category"
            placeholder="Select"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面" prop="cover">
          <Upload :avatar="newsForm.cover" @uploadChange="handleUploadChange" />
        </el-form-item>

        <el-form-item class="button-container" style="margin-left: 50px">
          <el-button type="primary" @click="submitForm()" class="custom-button">
            更新新闻
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import Editor from "@/components/editor/Editor.vue";
import Upload from "@/components/upload/Upload.vue";
import upload from "@/util/upload";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
const router = useRouter(); //整个路由对象
const route = useRoute(); //当前路由对象

const newsFormRef = ref();
const newsForm = reactive({
  title: "",
  content: "",
  category: 1, //1:最新动态, 2:典型案例 3:通知公告
  cover: "",
  file: null,
  isPublish: 0, //0未发布
});

const newsFormRules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  category: [{ required: true, message: "请选择类别", trigger: "blur" }],
  cover: [{ required: true, message: "请上传图片", trigger: "blur" }],
});

//每次editor内容改变后的回调
const handlechange = (data) => {
  // console.log(data);
  newsForm.content = data;
};

const options = [
  {
    label: "最新动态",
    value: 1,
  },
  {
    label: "典型案例",
    value: 2,
  },
  {
    label: "通知公告",
    value: 3,
  },
];

const handleUploadChange = (file) => {
  newsForm.cover = URL.createObjectURL(file);
  newsForm.file = file;
};

const submitForm = () => {
  newsFormRef.value.validate(async (valid) => {
    if (valid) {
      await upload("/adminapi/news/list", newsForm);
      router.back();
    }
  });
};
const handleBack = () => {
  router.back();
};

const showEditor = ref(false);
//取当前页面数据
onMounted(async () => {
  const res = await axios.get(`/adminapi/news/list/${route.params.id}`);
  //   console.log(res.data.result);

  if (res.data.result !== null) {
    Object.assign(newsForm, res.data.result);
    showEditor.value = true;
  }
});
</script>

<style scoped>
.el-form {
  margin-top: 50px;
}
</style>
